<template>
	<view class="main">
		<!-- <view class="tips">
			注：所反馈内容不会直接展示给患者，会先反馈到平台，平台客服人员确认后进行联系处理
		</view> -->
		<u-gap height="20" bg-color="#f8f8f8"></u-gap>
		<view class="card">
			<view class="name">
				<view class="">
					{{n.userName}}
				</view>
				<view class="">
					<u-rate :current="n.totalScore" :disabled="true" active-color="#F8A830"
						inactive-icon="star-fill"></u-rate>
				</view>
			</view>
			<view class="time">
				{{n.createTime}}
			</view>
			<view class="content">
				{{n.commentContent}}
			</view>
			<view class="start_time">
				<view class="left_time">
					就诊时间：{{n.orderTime}}
				</view>
			</view>
		</view>
		<view class="problem">
			<view class="top_tips">
				如果对患者评价有疑义，可向平台反馈，所反馈内容不会直接展示给患者，会先反馈到平台，平台客服人员确认后进行联系处理。
			</view>
			<view class="title">
				患者评价的内容中是否包含以下问题
			</view>
			<view class="sel_list">
				<u-checkbox-group @change="checkboxGroupChange" :wrap="true">
					<u-checkbox @change="checkboxChange" active-color="#4DC0D9" v-model="item.checked"
						v-for="(item, index) in list" :key="index" :name="item.value">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="feedback">
			<view class="title">
				具体反馈内容
			</view>
			<view class="details">
				<u-input v-model="value" :placeholder="placeholder" type="textarea" :border="false" height="200"
					:auto-height="true" :clearable="false" />
			</view>
		</view>
		<go-nav></go-nav>
		<bottom-button @confirm="confirm" text=提交></bottom-button>
	</view>
</template>

<script>
	import {
		getCommentProblemDict,
		insertCommentRecord
	} from '@/api/index.js'
	export default {
		data() {
			return {
				n: '',
				placeholder: '请详细描述问题',
				list: [
					// {
					// 	name: 'apple',
					// 	checked: false,
					// 	disabled: false
					// }
				],
				value: '',  //填写描述内容
				checked:'',   //所选值
				id:''   //问题id
			}
		},
		onLoad() {
			this.n = uni.getStorageSync('feedback')
			this.id = this.n.id
			this.getDict()
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.checked = e.join()
				// console.log(e);
			},
			async getDict() {
				let res = await getCommentProblemDict()
				if (res.code == 200) {
					this.list = []
					res.data.map(v => {
						this.list.push({
							name: v.label,
							value:v.value,
							checked: false,
							disabled: false
						})
					})
				}else{
					this.$u.toast(res.msg,3000)
				}
			},
			async postData(){
				let params = {
					commentId:this.id,
					problem:this.checked,
					problemContent:this.value
				}
				// console.log(params);
				// return
				let res = await insertCommentRecord(params)
				if(res.code == 200){
					this.$u.toast(res.msg,3000)
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/index/repulation/index'
						})
					},2000)
				}
			},
			confirm(){  //提交
				this.postData()
				//console.log(123);
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		background-color: #f8f8f8;
		//overflow: hidden;
		.tips {
			font-weight: 500;
			font-size: 28rpx;
			color: #F1280D;
			line-height: 33rpx;
			background: #FFF1EF;
			padding: 20rpx 24rpx;
		}

		.card {
			background-color: white;
			//margin-top: 20rpx;
			margin-bottom: 20rpx;

			.name {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 24rpx 4rpx 24rpx;
			}

			.time {
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 33rpx;
				padding-left: 24rpx;
			}

			.content {
				padding: 40rpx 24rpx 30rpx 24rpx;
				font-weight: 500;
				font-size: 34rpx;
				color: #212121;
				line-height: 52rpx;
			}

			.start_time {
				display: flex;
				justify-content: space-between;
				padding: 0 24rpx 24rpx 24rpx;

				.left_time {
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					line-height: 33rpx;
				}

				.report {
					display: flex;
					width: 100rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #4DC0D9;
					line-height: 35rpx;
				}
			}
		}

		.problem {
			background-color: white;
			.top_tips{
				padding: 24rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				line-height: 48rpx;
			}
			.title {
				padding: 24rpx 24rpx 32rpx 24rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				line-height: 42rpx;
			}

			.sel_list {
				margin: 0 24rpx;
			}
		}

		.feedback {
			background-color: white;
			padding-bottom: 300rpx;
			.title {
				padding: 24rpx 24rpx 32rpx 24rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				line-height: 42rpx;
			}

			.details {
				padding: 0 24rpx;

				::v-deep .u-input__textarea {
					//margin-left: 20rpx;
					background-color: #f8f8f8 !important;
					border-radius: 20rpx !important;
				}

				::v-deep .uni-textarea-placeholder {
					padding-left: 24rpx;
				}
				::v-deep .uni-textarea-compute{
					padding-left: 24rpx;
				}
				::v-deep .uni-textarea-textarea{
					padding-left: 20rpx !important;
				}
			}
		}

	}
</style>